<template>
  <div>
    <div class="loginBack">
      <el-form ref="form" :rules="rules" :model="form" label-width="0px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="logins">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
         password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 6, max: 10, message: "长度在 6到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods:{
      reset(){
          this.$refs.form.resetFields();
      },logins(){
          this.$refs.form.validate(async v=>{
              if(!v) {
                this.$message.error('登录失败了,请重新登录')
                this.$refs.form.resetFields(); 
              }
              else {
                const {data :result}= await this.$http.post('login',this.form)
                console.log(result);
                this.$message.success('登录成功')
                if( result.meta.status !=200 ) return
                const tokenStr =window.sessionStorage.setItem("token", result.data.token)
                this.$router.push('/home')
              }
              
          });
          

      }
  }
};
</script>
<style lang="less" scoped>
.loginBack {
  width: 400px;
  height: 300px;
  background: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>